<template>
    <div class="roles">
        <el-button type="primary" @click="addtrue">添加角色</el-button>
        <!-- 表格 -->
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div class="authority">
                            <div class="authority11" v-for="item in scope.row.children" :key="item.id">
                                <el-row>
                                    <el-col :span="4">
                                        <el-tag closable>{{ item.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row v-for="ele in item.children" :key="ele.id">
                                            <el-col :span="8">
                                                <el-tag type="success" closable>{{ ele.authName }}</el-tag>
                                            </el-col>
                                            <el-col :span="4" v-for="obj in ele.children" :key="obj.id">
                                                <el-tag closable type="warning">{{ obj.authName }}</el-tag>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>


                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="index">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="primary" size="medium"
                            @click="edit(scope.row)">编辑</el-button>
                        <el-button icon="el-icon-delete " type="danger" size="medium"
                            @click="del(scope.row.id)">删除</el-button>
                        <el-button icon="el-icon-s-tools" type="warning" size="medium"
                            @click="permissions(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 分配权限弹出框 -->
        <el-dialog title="分配权限" :visible.sync="dialogVisibleqx" width="30%">
            <el-tree :data="data" show-checkbox node-key="id" ref="tree" default-expand-all highlight-current
                :props="defaultProps">
            </el-tree>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleqx = false">取 消</el-button>
                <el-button type="primary" @click="addpermissions">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加弹出框 -->
        <el-dialog :title="titleadd" :visible.sync="dialogVisibleadd" width="30%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="ruleForm.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="ruleForm.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleadd = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getroles, getrights, getrolesadd, getrolesedit, getrolesdelete, getaddeditroles } from "../utils/roles"
export default {
    data() {
        return {
            titleadd: "",
            addidx: -1,
            qxidx: -1,
            tableData: [],//角色列表数据
            dialogVisibleqx: false,//权限弹出框
            dialogVisibleadd: false,//添加弹出框
            data: [],//树状图数据
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            ruleForm: {
                roleName: "",
                roleDesc: ""
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ],
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                ],
            },

        }
    },
    methods: {
        //请求角色列表
        getDataroles() {
            getroles().then(res => {
                console.log(res);
                this.tableData = res.data
            })
        },
        //请求树状图数据
        getDatarights() {
            getrights().then(res => {
                console.log(res);
                this.data = res.data
            })
        },
        //权限回填
        permissions(row) {
            this.dialogVisibleqx = true
            this.qxidx = row.id //存角色ID
            let arr = []
            row.children.forEach(item => {
                if (!item.children) return;
                item.children.forEach(ele => {
                    ele.children.forEach(i => {
                        arr.push(i.id)
                    })
                })
            });
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys(arr);
            });
        },
        //确定权限
        addpermissions() {
            // console.log(this.$refs.tree.getCheckedKeys());
            // console.log(this.$refs.tree.getHalfCheckedKeys());
            let childrenId = this.$refs.tree.getCheckedKeys()
            let itemId = this.$refs.tree.getHalfCheckedKeys()
            let rids = [...childrenId, ...itemId].join(",")
            getaddeditroles(this.qxidx, { rids }).then(res => {
                console.log(res);
                if (res.meta.status == 200) {
                    this.dialogVisibleqx = false
                    this.getDataroles()
                }
            })


        },
        // 触发添加弹出层
        addtrue() {
            this.dialogVisibleadd = true
            this.titleadd = "添加角色"
            this.ruleForm = {}
        },
        // 添加编辑
        add() {
            if (this.addidx == -1) {
                getrolesadd(this.ruleForm).then(res => {
                    console.log(120, res);
                    if (res.meta.status == 201) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        });
                    }
                    this.getDataroles()
                })
            } else {
                getrolesedit(this.ruleForm).then(res => {
                    console.log(139, res);
                    if (res.meta.status == 200) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        });
                    }
                    this.qxidx = -1
                    this.getDataroles()
                })
            }
            this.dialogVisibleadd = false
        },
        // 编辑回填
        edit(row) {
            this.ruleForm = { ...row }
            this.addidx = row.roleId
            this.dialogVisibleadd = true
            this.titleadd = "编辑角色"
        },
        // 删除
        del(id) {
            getrolesdelete(id).then(res => {
                console.log(162, res);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getDataroles()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })
        }
    },
    created() {
        this.getDataroles()
        this.getDatarights()
    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.roles {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.authority {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
</style>
